import { Component, OnInit, ViewEncapsulation } from '@angular/core';

import {Hero} from  '../hero';
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class FormComponent implements OnInit {
  str= 'hello jj';
  values= '';
  heros= ['AA', 'BB', 'CC'];
  constructor() { }
  powers = ['Really Smart', 'Super Flexible',
    'Super Hot', 'Weather Changer'];

  model = new Hero(18, 'Dr IQ', this.powers[0], 'Chuck Overstreet');
  ngOnInit() {
    console.log(this.model.name);
  }
  myClick() {
    this.str = 'hello form';
  }
  // onKey(event: any) {
  //   this.values += event.target.value + '|';
  // }
  // onKey(event: KeyboardEvent) {
  //   this.values += (<HTMLInputElement>event.target).value + '|';
  // }
  onKey(value: string) {
    this.values += value;
  }
  addName(value: string) {
    if (value) {
      this.heros.push(value);
    }
  }
}
